<style lang="less">
@import '../../static/less/variable.less';
.exam-content {
    padding: @pad;
    h4 {
        font-size: 18px;
    }
    .nav , .list {
        margin-top: 15px;
    }
    .nav {
        box-sizing: border-box;
        
        ul {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-auto-rows: auto;
            row-gap: 10px;
            column-gap: 10px;
            margin-top: 15px;
            li {
                text-align: center;
                border: 1px solid #f0f0f0;
                box-sizing: border-box;
                padding: 10px;
                border-radius: 5px;
                &.active {
                    border-color: @borderColor;
                    p {
                        color: @activeColor;
                    }
                }
                img {
                    width: 40px;
                }
                p {
                    font-size: 14px;
                    margin-top: 8px;
                }
            }
        }
    }
    .list {
        ul {
            li {
                font-size: 18px;
                height: 48px;
                line-height: 48px;
                margin-top: 10px;
                border-bottom: 1px dashed #f0f0f0;
                a {
                    display: block;
                    height: 46px;
                }
            }
        }
    }
}

</style>
<template>
    <!-- <h3>分类&试卷列表页</h3> -->
     <div class="exam-content">
        <div class="nav">
            <h4>考试分类</h4>
            <ul>
                <li @click="getCateGoryListAll" :class="10 == index? 'active':''">
                    <van-icon name="list-switch" size="40" />
                    <p>全部</p>
                </li>
                <li v-for="(item, i) in categories" :class="i == index? 'active':''" @click="getCateGoryListFn(item.id, i)">
                    <img :src="item.icon" alt="">
                    <p>{{ item.text }}</p>
                </li>
               
            </ul>
        </div>
        <div class="list">
            <h4>试卷列表</h4>
            <ul>
                <li v-for="item in examList">
                    <router-link :to="`/detail?eid=${item.eid}`">{{ item.name }}</router-link>
                </li>
            </ul>
        </div>
     </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// 导入获取储存对象的函数
import { useExamStore } from '@/stores/exam'
import { storeToRefs } from 'pinia'
// 记录储存对象
const examStore = useExamStore()
examStore.getCategory()
// 从储存对象中直接取值
let {categories , examList} = storeToRefs(examStore)

// 导航索引值
let index = ref(-1)
// 获取当前点击的分类
const getCateGoryListFn = async (id:string,num: number) => {
    index.value = num;
    examStore.getCurrentCategoryList(id);//筛选数据
}
// 全部
const getCateGoryListAll = async ()=> {
    index.value = 10;
    examStore.getExam();
}
</script>